<template>
  <div id="single-choice"
      class="task-single-choice judge">
      <!-- 每个单选 -->
      <div class="task-single-main"
        :id="'judge'+opIndex"
        v-for="(option,opIndex) in FormData.judgeData"
        :key="opIndex">
      <Card dis-hover>
        <div class="clearfix" style="margin: 0 0 0 0;">
          <div style="width:470px;float:left;">{{opIndex+1}}. {{option.subject}} ({{option.score}}分) </div>
        </div>
        <Radio-group v-model="FormData.judgeData[opIndex].studentAnswer" vertical>
          <Radio v-for="(choice,chIndex) in option.options" :key="chIndex" class="task-el-radio task-el-single-option"
            :label="option.options[chIndex]" :disabled="option.submitted">
              {{choice}}
            <span v-if="option.submitted && FormData.judgeData[opIndex].studentAnswer === choice">
              <Icon type="checkmark-round" color="green"  v-if="option.yourAnswer"></Icon>
              <Icon type="close-round" color="red" v-if="!option.yourAnswer"></Icon>
            </span>
          </Radio>
        </Radio-group>
        <div style="float: right;margin-top: 30px;">
          <Button type="primary" icon="checkmark-round" title="提交本题" @click="submitQuestion(option, opIndex)" :disabled="option.submitted">提交</Button>
        </div>
      </Card>
      <!-- 题目分割线 -->
      <div class="hr" v-if="opIndex!=FormData.judgeData.length-1"/>
      </div>
  </div>
</template>

<script>
import api from '../../../../api'
export default {
  name: 'judge',
  props: ['FormData'],
  data () {
    return {
      visible2: [],
      href: ''
    }
  },
  mounted () {
    this.$emit('singleAnswer', 1)
    this.FormData.judgeData.forEach(_ => {
      this.visible2.push(false)
      this.FormData.studentScore += Math.round(_.score * _.studentScore)
    })
  },
  methods: {
    submitQuestion (option, opIndex) {
      if (!option.studentAnswer) {
        this.$Message.error('请完成题目后再提交')
      } else {
        // 题目不可用
        option.submitted = true
        let passData = {
          selection_problem_id: option.id,
          homework_id: this.FormData.homework_id,
          classroom_id: parseInt(this.$route.params.classroomId),
          answers: [option.studentAnswer]
        }
        api.submitHomeworkSelection(passData).then(res => {
          option.yourAnswer = JSON.parse(res.data.data.info[0].replace(/'/g, '"')).result // 单引号换成双引号,转换成json格式
          if (option.yourAnswer) {
            this.FormData.studentScore += Math.round(option.score * res.data.data.statistic_info.score)
          }
          this.updateHomeworkScore()
        }).catch((e) => {
        })
      }
    },
    updateHomeworkScore () {
      let passData = {
        classroom_id: this.$route.params.classroomId,
        homework_id: this.FormData.homework_id,
        score: this.FormData.studentScore
      }
      // 提交作业分数
      api.postClassroomStudentHomeworkStatus(passData).then(res => {})
    }
  }
}
</script>

<style lang="less" scoped>
</style>
<style lang="less">
.el-row {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #E4E7ED;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    line-height: 36px;
    text-align:center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
.el-input::-webkit-outer-spin-button,
.el-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}

.el-input input[type="number"]::-webkit-outer-spin-button,
.el-input input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}

/*在firefox下移除input[number]的上下箭头*/
.el-input {
  -moz-appearance: textfield;
}

.el-input input[type="number"] {
  -moz-appearance: textfield;
}
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
</style>
